<template>
    <div class="heat">
        <div class="heat-map" id="container"></div>
    </div>
</template>

<script>
import { ZongHeZhiFaDB } from '@/api/zhangzi'
let HEATMAP = null;
// var path = [
//       [116.379028, 39.865042],
//       [116.422897, 39.878002],
//       [116.372105, 39.90651],
//       [116.427281, 39.903719]
//     ];
export default {
    props:['userId'],
    data() {
        return {
            beginTime:'',
            endTime:'',
            path:[]
        }
    },
    mounted() {
        this.mapInit()

    },
    methods: {
        mapInit() {
            HEATMAP = new  AMap.Map('container',{
                resizeEnable: true,
                zoom: 17,
                pitch: 50,
                rotation: -15,
                viewMode: '3D', //开启3D视图,默认为关闭
                zooms: [2, 20],
                center: ['112.87795', '36.12222']
            });
           
        },
       
        drawRoute() {
            console.log(this.path);
            var startMarker = new AMap.Marker({
                position: this.path[0],
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
                map: HEATMAP,
                offset: new AMap.Pixel(-8,-15)

            })

            var endMarker = new AMap.Marker({
                position: this.path[this.path.length - 1] ,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
                map: HEATMAP,
                offset: new AMap.Pixel(0,-15)
            })

            var routeLine = new AMap.Polyline({
                path: this.path,
                isOutline: true,
                outlineColor: '#ffeeee',
                borderWeight: 2,
                strokeWeight: 5,
                strokeOpacity: 0.9,
                strokeColor: '#0091ff',
                lineJoin: 'round'
            })

            HEATMAP.add(routeLine);
            // 调整视野达到最佳显示区域
            HEATMAP.setFitView([startMarker, endMarker, routeLine])
        },

        // 轨迹
      async personalList(start,end){
        let params = {
            userId: this.userId,
            beginTime:start,
            endTime:end,
        }
          const res =  await ZongHeZhiFaDB.addPersonLocationAPI(params)
          res.data.forEach(item =>{
            let poin = item.coordinate.split(',')
            const numArray = poin.map(Number);
            console.log(numArray);
            this.path.push(numArray)
            console.log(this.path,'轨迹');
          })
          this.drawRoute()
        }
    }
}
</script>

<style lang="less" scoped>
.heat {
    width: 100%;
    height: 350px;
    margin-top: 2rem;
    background-color: #fff;

    .heat-map {
        width: 100%;
        height: 100%;
    }
}
</style>